<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/content/script.js"></script>
    <link rel="stylesheet" href="/content/style.css" type="text/css" />
    <title>${msg['jsp.login.title']}</title>
</h:head>
<h:body class="mid">
    <fieldset>
        <legend>${msg['jsp.login.title']}</legend>
        <h:form id="login" prependId="false">
            <table>
            <tr>
                <td>
                    <h:outputLabel for="email" value="${msg['jsp.login.email']}"/>
                </td>
                <td>
                    <h:inputText id="email" value="#{login.email}" required="true">
                        <f:validator validatorId="EmailValidator" />
                        <f:ajax render="emailMsg"/>
                    </h:inputText>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <h:message id="emailMsg" for="email" style="color:red;" />
                </td>
            </tr>
            <tr>
                <td>
                    <h:outputLabel for="password" value="${msg['jsp.login.password']}"/>
                </td>
                <td>
                    <h:inputSecret id="password" value="#{login.password}" required="true">
                        <f:validateLength minimum="8" maximum="16" />
                        <f:validator validatorId="StrongPasswordValidator" />
                        <f:ajax event="change" render="passwordMsg"/>
                    </h:inputSecret>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <h:message id="passwordMsg" for="password" style="color:red;" />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right">
                    <h:commandButton value="${msg['jsp.login.forgetPassword']}" action="${login.forgetPassword}" styleClass="button" type="button">
                        <f:ajax execute="email" render="emailMsg passwordMsg" onevent="handleButtonEvent" />
                    </h:commandButton>
                    &#160;
                    <h:commandButton value="${msg['jsp.login.login']}" action="${login.login}" styleClass="button">
                        <f:ajax execute="email password" render="emailMsg passwordMsg" onevent="handleButtonEvent" />
                    </h:commandButton>
                </td>
            </tr>
            </table>
        </h:form>
    </fieldset>
</h:body>
</html>
